<script setup lang="ts">
import { getAdminLoginRecordsApi } from '@/apis/modules/admin'

const visible = defineModel<boolean>('visible', { required: true })
const appStore = useAppStore()
const state = ref({
  admin_id: appStore.adminInfo?.id,
})

const { run, pagination, data } = useListRequest(getAdminLoginRecordsApi, {
  params: state,
  immediate: false,
})
const tableColumns = computed(() =>
  buildColumns([
    {
      dataIndex: 'login_at',
      title: '登录时间',
      width: 180,
      sortable: sortableSettings,
      format: 'date-time',
    },
    {
      dataIndex: 'login_ip',
      title: '登录IP',
      minWidth: 100,
    },
    {
      dataIndex: 'login_addr',
      title: 'IP所在地',
      minWidth: 120,
    },
    {
      dataIndex: 'system_info',
      title: '系统版本',
      minWidth: 120,
    },
    {
      dataIndex: 'browser_info',
      title: '浏览器版本',
      minWidth: 120,
    },
  ]),
)
const { tableRef, createSortChange } = useTable(run, data)
const onSorterChange = createSortChange(state)
function handlePageChange(page: number, size: number) {
  pagination.value.current = page
  pagination.value.pageSize = size
  run()
}
function handleOpen() {
  pagination.value.current = 1
  pagination.value.pageSize = 20
  run()
}
</script>

<template>
  <a-drawer
    v-model:visible="visible"
    title="登录记录"
    :width="800"
    :footer="false"
    unmount-on-close
    @before-open="handleOpen"
  >
    <a-table
      ref="tableRef"
      :columns="tableColumns"
      :data="data"
      :pagination="false"
      @sorter-change="onSorterChange"
    />
    <a-pagination
      v-bind="pagination"
      v-model:current="pagination.current"
      v-model:page-size="pagination.pageSize"
      class="mt-6"
      :show-total="false"
      show-page-size
      :page-size-options="[10, 20, 30, 50, 100]"
      @change="(v: number) => handlePageChange(v, pagination.pageSize)"
      @page-size-change="(v: number) => handlePageChange(1, v)"
    />
  </a-drawer>
</template>

<style lang="less"></style>
